<template>
  <div class="typicalCaseContainer">
    <Row class="itemContainer">
      <Col span="11" class="imgContainer">
        <img src="../assets/dxyy/承载力评价.png" width="420px" height="280px" />
      </Col>
      <Col span="13">
        <Col span="24" class="titleContainer">
          <span>土地综合承载力评价</span>
        </Col>
        <Col span="24" class="contentContainer">
          <p>
            土地综合承载力是指在一定空间区域内，一定的社会、经济、资源、生态、环境条件约束下，区域土地资源所能支撑的最大国土开发规模和强度。对建设用地开发利用程度、耕地进行评价，为国土空间规划方案的形成及合理性评判提供重要支撑。
          </p>
        </Col>
        <Col span="24" class="jumpContainer">
          <span
            ><a
              href="http://gis37.arcgisonline.cn/gh_out/index.html"
              target="_blank"
            >
              查看详情&nbsp;></a
            ></span
          >
        </Col>
      </Col>
    </Row>
    <Row class="itemContainer">
      <Col span="13">
        <Col span="24" class="titleContainer">
          <span>土地利用动态检测</span>
        </Col>
        <Col span="24" class="contentContainer">
          <p>
            针对区域内的土地利用变化的类型、位置和数量等信息进行动态分析，有针对性地建立建设用地规模扩展和耕地变化情况的监测体系，分析土地利用的变化趋势和年度土地利用平衡面积估计，有助于核查土地变更调查数据的真实程度。
          </p>
        </Col>
        <Col span="24" class="jumpContainer">
          <span
            ><a
              href="http://gis37.arcgisonline.cn/gh_out/index.html"
              target="_blank"
            >
              查看详情&nbsp;></a
            ></span
          >
        </Col>
      </Col>
      <Col span="11" class="imgContainer">
        <img src="../assets/dxyy/动态评价.png" width="420px" height="280px" />
      </Col>
    </Row>
    <Row class="itemContainer">
      <Col span="11" class="imgContainer">
        <img src="../assets/dxyy/耕地保护.png" width="420px" height="280px" />
      </Col>
      <Col span="13">
        <Col span="24" class="titleContainer">
          <span>耕地保护</span>
        </Col>
        <Col span="24" class="contentContainer">
          <p>
            充分利用自然资源“一张图，”实现耕地变化信息监测、耕地保护监督、占补平衡、耕地保护目标责任考核、永久基本农田监测监管、设施农用地监管等耕地保护业务管理工作的数字化、网络化以及智能化，不断提升耕地资源现代化治理水平。
          </p>
        </Col>
        <Col span="24" class="jumpContainer">
          <span
            ><a
              href="http://gis37.arcgisonline.cn/gh_out/index.html"
              target="_blank"
            >
              查看详情&nbsp;></a
            ></span
          >
        </Col>
      </Col>
    </Row>
    <Row class="itemContainer">
      <Col span="13">
        <Col span="24" class="titleContainer">
          <span>智能选址</span>
        </Col>
        <Col span="24" class="contentContainer">
          <p>
            “多规合一”作为消除规划冲突的有效手段,对促进建设项目选址落地具有重要作用。分析规划符合性因素对项目选址的定性影响，建立智能选址模型并对辅助建设项目选址全过程，实现项目选址的信息化，促进项目投资高效智能的选址落地。
          </p>
        </Col>
        <Col span="24" class="jumpContainer">
          <span
            ><a
              href="http://gis37.arcgisonline.cn/gh_out/index.html"
              target="_blank"
            >
              查看详情&nbsp;></a
            ></span
          >
        </Col>
      </Col>
      <Col span="11" class="imgContainer">
        <img src="../assets/dxyy/智能选址.png" width="420px" height="280px" />
      </Col>
    </Row>
    <Row class="itemContainer">
      <Col span="11" class="imgContainer">
        <img src="../assets/dxyy/线索发现.png" width="420px" height="280px" />
      </Col>
      <Col span="13">
        <Col span="24" class="titleContainer">
          <span>违法线索发现</span>
        </Col>
        <Col span="24" class="contentContainer">
          <p>
            将探矿权、采矿权等数据与国家自然保护区数据进行叠加分析，提取疑似违法用地图斑，为执法监察提供重要信息，坚决打击违法违规用地行为，及时消除违法状态，切实维护国土资源管理秩序和群众合法权益。
          </p>
        </Col>
        <Col span="24" class="jumpContainer">
          <span
            ><a
              href="http://gis37.arcgisonline.cn/gh_out/index.html"
              target="_blank"
            >
              查看详情&nbsp;></a
            ></span
          >
        </Col>
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  name: "TypicalCase",
  methods: {
    getHeight() {
      this.$(".typicalCaseContainer").height(window.innerHeight - 96);
    }
  },
  mounted() {
    this.getHeight();
  }
};
</script>
<style scoped>
.typicalCaseContainer {
  padding: 50px 400px;
  overflow-y: auto;
}
.imgContainer:nth-child(odd) {
  text-align: left;
}
.imgContainer:nth-child(even) {
  text-align: right;
}
.titleContainer {
  margin: 40px 0px 10px;
  font-size: x-large;
  font-weight: bold;
}
.contentContainer {
  margin: 20px 0;
  font-size: medium;
}
.jumpContainer {
  font-size: medium;
}
.itemContainer {
  margin-bottom: 50px;
  position: relative;
}
</style>
